<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>layPage demo</title>
<meta name="keywords" content="分页插件,ajax分页,异步分页">
<meta name="description" content="laypage是一款多功能的js分页组件，主要应用于前端页面Ajax普通分页以及信息流加载，并且可无缝迁移至Node.js平台。laypage不依赖于任何第三方库，直接拿来用即可，它的接口继承了layui系列组件的一贯简洁，极易上手。那么，从现在开始，将分页的任务交给laypage吧！">
</head>
<body>

<ul id="biuuu_city_list"></ul>

<div id="biuuu_city"></div>

<script src="../laypage.js"></script>
<script>

//测试数据
var data = [
    '北京',
    '上海',
    '广州',
    '深圳',
    '杭州',
    '长沙',
    '合肥',
    '宁夏',
    '成都',
    '西安',
    '南昌',
    '上饶',
    '沈阳',
    '济南',
    '厦门',
    '福州',
    '九江',
    '宜春',
    '赣州',
    '宁波',
    '绍兴',
    '无锡',
    '苏州',
    '徐州',
    '东莞',
    '佛山',
    '中山',
    '成都',
    '武汉',
    '青岛',
    '天津',
    '重庆',
    '南京',
    '九江',
    '香港',
    '澳门',
    '台北'
];

var nums = 5; //每页出现的数量
var pages = Math.ceil(data.length/nums); //得到总页数

var thisDate = function(curr){
    //此处只是演示，实际场景通常是返回已经当前页已经分组好的数据
    var str = '', last = curr*nums - 1;
    last = last >= data.length ? (data.length-1) : last;
    for(var i = (curr*nums - nums); i <= last; i++){
        str += '<li>'+ data[i] +'</li>';
    }
    return str;
};

//调用分页
laypage({
    cont: 'biuuu_city',
    pages: pages,
    jump: function(obj){
        document.getElementById('biuuu_city_list').innerHTML = thisDate(obj.curr);
        
    }
})
</script>


</body>
</html>